<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Team JAYZ Snake And Ladders</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #eaeaea;
            margin: 0;
            padding: 20px;
        }
        h1 {
            color: #333;
        }
        #container {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            margin: 20px;
        }
        #board {
            display: grid;
            grid-template-columns: repeat(6, 60px);
            grid-template-rows: repeat(5, 60px);
            gap: 1px;
            margin: 20px;
            width: 370px;
            height: 310px;
            background-color: #fff;
            border: 2px solid #333;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .square {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #333;
            background-color: #f0f0f0;
            position: relative;
            font-weight: bold;
            font-size: 18px;
            transition: background-color 0.3s;
        }
        .square:hover {
            background-color: #d1d1d1;
        }
        .snake { background-color: rgba(255, 0, 0, 0.5); }
        .ladder { background-color: rgba(0, 255, 0, 0.5); }
        .player {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
            color: white;
            position: absolute;
            top: 15%;
            left: 15%;
            font-size: 12px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .p1 { background-color: red; }
        .p2 { background-color: blue; }
        .p3 { background-color: green; }
        .p4 { background-color: orange; }
        .p5 { background-color: violet; }
        .p6 { background-color: pink; }
        #details, #questionBox, #leaderboard {
            margin-left: 20px;
            text-align: left;
            background-color: #fff;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        #questionBox {
            display: none;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10;
        }
        #questionText {
            font-weight: bold;
            margin-bottom: 10px;
        }
        #choices div {
            margin: 5px 0;
        }
        #rollButton {
            margin: 20px;
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        #rollButton:hover {
            background-color: #0056b3;
        }
        #buttonContainer {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }
        #message {
            margin-top: 10px;
            font-weight: bold;
        }
        #timer {
            font-size: 20px;
            font-weight: bold;
            color: red;
        }
        #leaderboard {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Team JAYZ Snake And Ladders</h1>
    <div id="container">
        <div id="board"></div>
        <div id="details">
            <h2>Game Details</h2>
            <div><strong>Snakes:</strong></div>
            <ul id="snakeList"></ul>
            <div><strong>Ladders:</strong></div>
            <ul id="ladderList"></ul>
            <div><strong>Player Positions:</strong></div>
            <ul id="playerPositionsList"></ul>
            <div id="leaderboard">
                <h2>Leaderboard</h2>
                <ul id="rankingsList"></ul>
            </div>
        </div>
    </div>
    <div id="buttonContainer">
        <button id="rollButton">Roll Dice</button>
    </div>
    <div id="message"></div>
    <div id="questionBox">
        <h3 id="questionText"></h3>
        <div id="choices"></div>
        <div id="timer">20</div>
        <button id="submitAnswer">Submit Answer</button>
    </div>
    <script>
        const board = document.getElementById('board');
        const rollButton = document.getElementById('rollButton');
        const message = document.getElementById('message');
        const snakeList = document.getElementById('snakeList');
        const ladderList = document.getElementById('ladderList');
        const playerPositionsList = document.getElementById('playerPositionsList');
        const questionBox = document.getElementById('questionBox');
        const questionText = document.getElementById('questionText');
        const choices = document.getElementById('choices');
        const submitAnswer = document.getElementById('submitAnswer');
        const timerDisplay = document.getElementById('timer');
        const rankingsList = document.getElementById('rankingsList');

        const playerNames = ["Alice", "Bob", "Charlie"]; 
        const playerPositions = Array(playerNames.length).fill(0); // Initialize positions for players
        let currentPlayer = 0; // Start with the first player

        let diceRoll;
        let timer;
        let currentQuestionIndex = 0; // Track which question is being asked

        const snakes = { 16: 6, 22: 10 }; // Snakes details
        const ladders = { 2: 15, 7: 20 }; // Ladders details

        const questions = [
             {
                question: "EASY ROUND:sa 90s TV NoonTime Show na Eat Bulaga Sino sino Ang tatlong Lead TV host?",
                options: ["Tito Vic and Joey", "Vice Jhong and Vhong", "Lebron wade and Bosh"],
                answer: "Tito Vic and Joey"
            },
        ];

        function createBoard() {
            for (let i = 30; i >= 1; i--) {
                const square = document.createElement('div');
                square.classList.add('square');
                square.textContent = i;

                // Add snakes
                if (snakes[i]) {
                    square.classList.add('snake');
                }

                // Add ladders
                if (ladders[i]) {
                    square.classList.add('ladder');
                }

                board.appendChild(square);
            }
            // Display snake and ladder details
            updateDetails();
        }

        function updateDetails() {
            snakeList.innerHTML = '';
            for (const [start, end] of Object.entries(snakes)) {
                const li = document.createElement('li');
                li.textContent = `From ${start} to ${end}`;
                snakeList.appendChild(li);
            }

            ladderList.innerHTML = '';
            for (const [start, end] of Object.entries(ladders)) {
                const li = document.createElement('li');
                li.textContent = `From ${start} to ${end}`;
                ladderList.appendChild(li);
            }
        }

        function updatePlayerPosition() {
            const squares = document.querySelectorAll('.square');
            squares.forEach(square => square.innerHTML = '');

            playerPositions.forEach((pos, idx) => {
                if (pos > 0 && pos <= 30) {
                    const playerSquare = squares[30 - pos];
                    const playerDiv = document.createElement('div');
                    playerDiv.classList.add('player', `p${idx + 1}`);
                    playerDiv.textContent = playerNames[idx];
                    playerSquare.appendChild(playerDiv);
                }
            });
        }

        function updatePlayerPositionsList() {
            playerPositionsList.innerHTML = '';
            playerPositions.forEach((pos, idx) => {
                const li = document.createElement('li');
                li.textContent = `${playerNames[idx]}: ${pos}`;
                playerPositionsList.appendChild(li);
            });
        }

        function updateLeaderboard() {
            rankingsList.innerHTML = '';
            playerPositions.forEach((pos, idx) => {
                if (pos === 30) { // Only include players at the end
                    const li = document.createElement('li');
                    li.textContent = playerNames[idx];
                    rankingsList.appendChild(li);
                }
            });
        }

        function rollDice() {
            // Check if the player has reached the end
            if (playerPositions[currentPlayer] >= 30) {
                message.textContent = `${playerNames[currentPlayer]} has already reached the end and cannot roll.`;
                currentPlayer = (currentPlayer + 1) % playerNames.length; // Move to next player
                return;
            }

            diceRoll = Math.floor(Math.random() * 6) + 1;
            message.textContent = `${playerNames[currentPlayer]} rolled a ${diceRoll}`;
            askQuestion();
        }

        function startTimer() {
            let timeLeft = 20;
            timerDisplay.textContent = timeLeft;

            timer = setInterval(() => {
                timeLeft--;
                timerDisplay.textContent = timeLeft;

                if (timeLeft <= 0) {
                    clearInterval(timer);
                    checkAnswer(null); // Time out - treat as no answer selected
                }
            }, 1000);
        }

        function askQuestion() {
            rollButton.style.display = 'none'; // Hide the Roll Dice button
            const question = questions[currentQuestionIndex];
            questionText.textContent = question.question;
            choices.innerHTML = '';

            question.options.forEach(option => {
                const li = document.createElement('div');
                li.innerHTML = `<label><input type="radio" name="answer" value="${option}"> ${option}</label>`;
                choices.appendChild(li);
            });

            questionBox.style.display = 'flex';
            startTimer();

            submitAnswer.onclick = () => {
                clearInterval(timer); // Clear timer when answer is submitted
                checkAnswer(question.answer);
            };
        }

        function checkAnswer(correctAnswer) {
            const selectedAnswer = document.querySelector('input[name="answer"]:checked');
            let answeredCorrectly = false;

            if (selectedAnswer) {
                const answerValue = selectedAnswer.value;
                if (answerValue === correctAnswer) {
                    message.textContent += ` - Correct! ${playerNames[currentPlayer]} can move forward.`;
                    answeredCorrectly = true;
                    playerPositions[currentPlayer] += diceRoll;

                    // Check if player has reached 30
                    if (playerPositions[currentPlayer] >= 30) {
                        playerPositions[currentPlayer] = 30;
                        message.textContent += ` - ${playerNames[currentPlayer]} has reached the end!`;
                    } else {
                        // Check for snakes or ladders
                        if (snakes[playerPositions[currentPlayer]]) {
                            playerPositions[currentPlayer] = snakes[playerPositions[currentPlayer]];
                            message.textContent += ` - Oops! ${playerNames[currentPlayer]} slid down a snake to ${playerPositions[currentPlayer]}`;
                        } else if (ladders[playerPositions[currentPlayer]]) {
                            playerPositions[currentPlayer] = ladders[playerPositions[currentPlayer]];
                            message.textContent += ` - ${playerNames[currentPlayer]} climbed a ladder to ${playerPositions[currentPlayer]}`;
                        }
                    }
                } else {
                    message.textContent += ` - Incorrect! ${playerNames[currentPlayer]} stays put.`;
                }
            } else {
                message.textContent += ` - No answer selected. ${playerNames[currentPlayer]} stays put.`;
            }

            questionBox.style.display = 'none';
            rollButton.style.display = 'block'; // Show the Roll Dice button again
            updatePlayerPosition();
            updatePlayerPositionsList();
            updateLeaderboard(); // Update the leaderboard

            // Move to the next player
            currentPlayer = (currentPlayer + 1) % playerNames.length;

            // If answered incorrectly, don't change the question
            if (answeredCorrectly) {
                currentQuestionIndex = (currentQuestionIndex + 1) % questions.length; // Move to next question if answered correctly
            }
        }

        createBoard();
        updatePlayerPositionsList();
        updateLeaderboard(); // Initialize leaderboard
        rollButton.onclick = rollDice;
    </script>
</body>
</html>
